<template>
  <div class="app">
    <!-- <transition name="fade"> -->
    <keep-alive>
      <!-- 判断是否具有首页的标志
      是否具有要被缓存的标志
      有，渲染当前router-view -->
      <router-view v-if="$route.meta.keep"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keep"></router-view>
    <!-- </transition> -->
    <router-view name="foot"></router-view>
  </div>
</template>

<script>
</script>

<style lang="scss">
.app{
  display: flex;
  flex-direction: column;
  height: 100%;
  .box{
    flex: 1;
    // position: absolute;
    // width: 100vw;
    // background: #fff;
  }
}
// 进入之前的状态
// .fade-enter{
//   transform: translateX(-100vw);
// }
// 正在进入的状态
// .fade-enter-active{
//   transition: all 0.5s;
// }
// 进入结束后的状态
// .fade-enter-to{
//   transform: translateX(0);
// }
// 离开之前的状态
// .fade-leave{
//   transform: translateX(0);
// }
// 正在离开的状态
// .fade-leave-active{
//   transition: all 0.5s;
// }
// 离开结束后的状态
// .fade-leave-to{
//   transform: translateX(100vw);
// }
</style>
